<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>

    <title>Document</title>
    <link rel="stylesheet" href="../css/employee.css">
</head>
<body>
    <div id="app">
    <header>
        <h2 style="line-height: 80px; margin-left: 50px;">分类管理</h2>
    </header>
    <main>
        <div class="main-center">
            <div class="submit">
                <input type="button" value="+新增套餐" id="add" @click="add">
                <input type="button" value="-删除套餐" id="del">
            </div>
            <div class="table">
                <table width="90%">
                    <tr style="border: 2px solid rgb(243, 244, 249);">
                        <td>分类名称</td>
                        <td>分类类型</td>
                        <td>操作时间</td>
                        <td>排序</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="(item, i) in classInfos" style="border: 2px solid rgb(243, 244, 249);">
                        <td>{{item.typesName}}</td>
                        <td>{{item.types}}</td>
                        <td>{{item.updateTime}}</td>
                        <td>{{item.order}}</td>
                        <td>
                            <input type="button" value="修改" @click="updateClassInfo(i)">
                            <input type="button" value="删除" @click="del(i)">
                        </td>
                    </tr>
                    <!-- <c:forEach var="employee" items="${employees}">
                        <tr style="border: 2px solid rgb(243, 244, 249);">
                            <td>${employee.name}</td>
                            <td>${employee.username}</td>
                            <td>${employee.phone}</td>
                            <td>${employee.status}</td>
                            <td>
                                <a href="../employee/selectById?id=${employee.id}" id="update">修改</a>
                                <a href="../employee/delete?id=${employee.id}">删除</a>
                            </td>
                        </tr>
                    </c:forEach> -->
                </table>
            </div>

        </div>
        <div class="page-info">
            <span>共{{pageTool.pageTotal}}条</span>
            <select class="page" name="page" id="page" @click="selectAll" v-model="pageTool.pageSize">
                <option value="5">5条/每页</option>
                <option value="10">10条/每页</option>
            </select>
            <input type="button" value="-" width="30px" @click="reduce">
            <span>第{{pageTool.pageNo}}页</span>
            <input type="button" value="+" width="30px" @click="plus">
            <input type="text" style="outline: none; border: 1px solid rgb(229, 228, 228); width: 50px; height: 20px;">
        </div>
    </main>

    <div id="masking" :style="{display:(masking?'block':'none')}">
        <div class="operation">
            <div class="operation-header">
                <h2 style="padding: 20px;" id="test">{{test}}</h2>
            </div>
            <div class="operation-main">
                <form action="" method="post" target="a" @submit="onsubmit" id="myform">
                    <input type="text" name="id" value="classInfo.id" style="display: none;" id="employeeId">
                    <label for="">分类名称</label>
                    <input type="text" name="name" v-model="classInfo.typesName"><br>
                    <label for="">分类类型</label>
                    <input type="text" name="username" v-model="classInfo.types"><br>
                    <input type="submit">
                    <input type="button" id="cancel" value="取消" @click="cancel()">
                </form>
            </div>
        </div>
    </div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            classInfos: [],
            classInfo: {},
            masking: false,
            test: "修改套餐",
            uri: "",
            pageTool: {
                pageTotal: "",
                pageSize: "5",
                pageNo: 1
            },
        },
        methods: {
            //页数加

            plus() {
                if (this.pageTool.pageNo >= 1)
                    this.pageTool.pageNo++;
                this.selectAll();
            },
            reduce() {
                if (this.pageTool.pageNo > 1) {
                    this.pageTool.pageNo--;
                    this.selectAll();
                }

            },
            selectCount() {
                that = this;
                axios.get('http://localhost:8080/LS02_Impl/classInfo/selectCount').then(res => {
                    that.pageTool.pageTotal = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },

            add() {
                this.uri = "addClassInfo";
                this.classInfo = {};
                this.test = "新增套餐";
                this.show();
            },

            show() {
                this.masking = !this.masking;
            },

            del(i) {
                that = this;
                this.uri = "delete"
                axios.post('http://localhost:8080/LS02_Impl/classInfo/' + this.uri, this.classInfos[i].order)
                    .then(res => {
                        if (res.data == 1) {
                            that.selectAll();
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

            selectAll() {
                this.uri = "selectAll"

                that = this;
                this.selectCount();
                axios.post('http://localhost:8080/LS02_Impl/classInfo/' + this.uri, this.pageTool)
                    .then(res => {
                        // console.log("ALL");
                        // console.log(res.data);
                        that.classInfos = res.data;
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

            onsubmit(e) {
                that = this;
                e.preventDefault();
                if (this.classInfo != null) {
                    axios.post('http://localhost:8080/LS02_Impl/classInfo/' + this.uri, this.classInfo)
                        .then(res => {
                            if (res.data == 1) {
                                that.masking = false;
                                that.selectAll();
                            }
                        })
                        .catch(err => {
                            console.error(err);
                        })
                }
            },

            cancel() {
                this.masking = false;
                // console.log(this.masking);
            },

            updateClassInfo(i) {
                this.uri = "updateByOrder";
                this.test = "修改套餐";
                // console.log(i);
                this.classInfo = JSON.parse(JSON.stringify(this.classInfos[i]));
                this.masking = true;
                return;
                // console.log(this.employee);
            }
        },
        mounted() {
            this.selectAll();
        },
    })
</script>

</html>